<!DOCTYPE html>
<html>
<head lang="en">
    <title>添加试题</title>
    <link rel="stylesheet" href="/static/resources/bootstrap/css/bootstrap.css"/>
    <link href="/static/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/resources/css/style.css" rel="stylesheet">
    <link href="/static/resources/css/exam.css" rel="stylesheet">
    <!-- Javascript files -->
    <!-- jQuery -->
    <script type="text/javascript" src="/static/resources/js/jquery/jquery-3.1.1.min.js"></script>
    <!--VUE-->
    <script type="text/javascript" src="/static/resources/vue/vue.js"></script>
    <script type="text/javascript" src="/static/resources/vue/date.js"></script>
    <!-- Bootstrap JS -->
    <script type="text/javascript" src="/static/resources/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<header>
    <div class="navbar bs-docs-nav" role="banner">
        <div class="container">
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="/view/question/question-import"><i class=""></i>批量导入</a>
                    </li>

                    <li class="active">
                        <a href=""><i class=""></i>单个添加</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<div STYLE="margin-top: 50px;margin-right: 100px">
    <form role="form" id="detailForm" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">题目</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="questionType">题目类型</label>
            <div class="col-sm-10">
                <select class="form-control" id="questionType">
                    <option value="1">选择题</option>
                    <option value="3">判断题</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="field">题库</label>
            <div class="col-sm-10" id="fieldDiv">
                <select class="form-control" id="field">
                </select>
            </div>
        </div>
        <div class="form-group">
            <h5><label class="col-sm-2 control-label">可选知识点</label>
                <div class="col-sm-10" id="disSelect">

                </div>
            </h5>
        </div>
        <div class="form-group">
            <h5><label class="col-sm-2 control-label">已选知识点</label>
                <div class="col-sm-10" id="onSelect">

                </div>
            </h5>
        </div>
        <div id="questionBody">

        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="answer">答案</label>
            <div class="col-sm-10">
                <select class="form-control" id="answer">
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="analysis">试题解析</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="analysis" rows="3"></textarea>
            </div>
        </div>
        <div style="text-align: center">
            <button type="button" class="btn btn-info" onclick="addQuestion()"
                    style="margin: 20px">
                <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> 提交
            </button>
        </div>
    </form>
</div>
</body>
</html>
<script>

    var pointList = [];

    //查询题库分类列表信息 郭瀚钰
    function getAllField() {
        $.ajax({
            type: 'post',
            url: '/getAllField',
            dataType: 'json',
            async: false,
            success: function (msg) {
                $.each(msg, function (i, item) {
                    $("#field").append("<option class='optionCla' value=" + item.fieldId + ">" + item.fieldName + "</option>");
                });
            }, error: function () {
              //  alert("分类列表失败")
            }
        })
    }


    //根据题库id获取知识点列表信息 郭瀚钰
    function getPointByField() {
        $.ajax({
            type: 'post',
            url: '/Point/getPointByField',
            dataType: 'json',
            async: false,
            data: {
                fieldId: $("#field").val()
            },
            success: function (msg) {
                $.each(msg, function (i, item) {
                    $("#disSelect").append(
                            '<span class="label label-info" style="margin: 10px">\n' +
                            '    <input type="hidden" class="pointId"  value=' + item.pointId + '>\n' +
                            item.pointName + '\n' +
                            '</span>');
                });
            }, error: function () {
               // alert("子类分类列表失败");
            }
        })
    }

    $(function () {
        /**
         * 生成ABCD文本框
         */
        var questionBody =
                '<div class="form-group">\n' +
                '   <label class="col-sm-2 control-label" for="A">A:</label>\n' +
                '   <div class="col-sm-10">' +
                '        <input type="text" class="form-control" id="A" >\n ' +
                '   </div>\n' +
                '</div>\n' +
                '<div class="form-group">\n' +
                '   <label class="col-sm-2 control-label" for="B">B:</label>\n' +
                '   <div class="col-sm-10">' +
                '       <input type="text" class="form-control" id="B">\n ' +
                '   </div>\n' +
                '</div>\n' +
                '<div class="form-group">\n' +
                '   <label class="col-sm-2 control-label" for="C">C:</label>\n' +
                '   <div class="col-sm-10">' +
                '       <input type="text" class="form-control" id="C">\n ' +
                '   </div>\n' +
                '</div>\n' +
                '<div class="form-group">\n' +
                '   <label class="col-sm-2 control-label" for="D">D:</label>\n' +
                '   <div class="col-sm-10">' +
                '       <input type="text" class="form-control" id="D">\n ' +
                '   </div>\n' +
                '</div>';
        $("#questionBody").append(questionBody);
        /**
         * 生成questionType下拉框选项
         */
        $("#answer").append(
                '<option value="A">A</option>\n' +
                '<option value="B">B</option>\n' +
                '<option value="C">C</option>\n' +
                '<option value="D">D</option>'
        );

        /**
         * questionType切换
         */
        $("#questionType").change(function () {
            $("#questionBody").toggle();
            $("#answer").empty();
            if ($("#questionType").val() == 1) {
                $("#answer").append(
                        '<option value="A">A</option>\n' +
                        '<option value="B">B</option>\n' +
                        '<option value="C">C</option>\n' +
                        '<option value="D">D</option>'
                );
                $("#answer").val(null);
            } else {
                $("#answer").append(
                        '<option value="T">T</option>\n' +
                        '<option value="F">F</option>'
                );
                $("#answer").val(null);
            }
        })
        /**
         *  第一次填充题库下拉框和知识点标签
         */
        getAllField();

        getPointByField();
        /**
         * 题库切换
         */
        $("#field").delegate(".optionCla", "click", function () {
            $("#disSelect").empty();
            $("#onSelect").empty();
            pointList = [];
            getPointByField();
        });
        /**
         *  知识点标签点击切换
         */
        $("#onSelect").delegate("span", "click", function () {
            $("#disSelect").append($(this).clone());
            for (j = 0; j < pointList.length; j++) {
                if ($(this).children(".pointId").val() == pointList[j]) {
                    var removePoint = pointList[j];
                    pointList = $.grep(pointList, function (value) {
                        return value != removePoint;
                    });
                }
            }
            $(this).remove();
        })

        $("#disSelect").delegate("span", "click", function () {
            $("#onSelect").append($(this).clone());

            pointList.push($(this).children(".pointId").val())

            $(this).remove();
        })

    })

    var addQuestion = function () {
        if (pointList.length != 0) {
            var pointStr = pointList.join(",");
        }
        $.ajax({
            type: 'post',
            url: '/addQuestion',
            data: {
                name: $("#name").val(),
                questionTypeId: $("#questionType").val(),
                fieldId: $("#field").val(),
                pointStr: pointStr,
                A: $("#A").val() || null,
                B: $("#B").val() || null,
                C: $("#C").val() || null,
                D: $("#D").val() || null,
                answer: $("#answer").val(),
                analysis: $("#analysis").val()
            },
            dataType: "JSON",
            success: function (msg) {

                if (msg.msg == "添加成功") {
                    if(confirm("添加成功,是否继续添加?")) {
                        location.href = "/view/question/question-add";
                    }else{
                        location.href = "/questionDetail?id=" + msg.id;
                    }
                }else{
                    alert(msg.msg);
                }
            }, error: function (msg) {
              alert(msg);
            }
        })
    }
</script>
